<template>
	<div class="layout-main">
		<div class="section section-filter">
			<div class="panel-title">
				<span class="title">筛选条件</span>
			</div>
			<div class="panel-content">
				<el-form :inline="true" :model="tableData.filter" @keyup.enter.native="sumbitSave">
					<el-form-item label="编号" prop="caseCode">
						<el-input v-model="tableData.filter.caseCode" placeholder="请输入编号"></el-input>
					</el-form-item>
					<el-form-item label="来源渠道">
						<el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品类型">
						<el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险类别">
						<el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险类型">
						<el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险等级">
						<el-select v-model="riskLevelForm.value" placeholder="请选择风险等级">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="举报人姓名">
						<el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="举报人手机号">
						<el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
					</el-form-item>
					<el-form-item label="被举报人姓名">
						<el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="被举报人手机号">
						<el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
					</el-form-item>
					<!-- <el-form-item label="所属分部">
						<el-input v-model="tableData.filter.salesDeptName" placeholder="请输入所属分部"></el-input>
					</el-form-item>
					<el-form-item label="分部负责人">
						<el-input v-model="tableData.filter.salesDeptPrincipal" placeholder="请输入分部负责人"></el-input>
					</el-form-item> -->
					<el-form-item label="案件类型">
						<el-select v-model="tableData.filter.caseType" placeholder="请选择案件类型">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键字">
						<el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
					</el-form-item>
				</el-form>
				<div class="form-btn">
					<button @click.prevent="sumbitSave">筛选</button>
					<button class="btn-reset" @click.prevent="reset">重置</button>
				</div>
			</div>
		</div>
		<div class="section section-table">
			<div class="panel-title">
				<span class="title">筛选结果</span>
			</div>
			<div class="panel-content">
				<el-table border :data="tableData.data" style="width: 100%">
					<el-table-column  fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<router-link :to="{ path: '/case/detail', query: { id: scope.row.id }}">详情</router-link>
						</template>
					</el-table-column>
					<el-table-column prop="caseCode" label="编号" width="218">
					</el-table-column>
					<el-table-column prop="threadDate" label="线索获取时间" width="155">
					</el-table-column>
					<el-table-column prop="cdate" label="案件创建时间" width="155">
					</el-table-column>
					<el-table-column prop="cdate" label="案件结案时间" width="155">
					</el-table-column>
					<el-table-column prop="sourceName" label="来源渠道" width="108">
					</el-table-column>
					<el-table-column prop="productName" label="产品类型" width="100">
					</el-table-column>
					<el-table-column prop="riskCategoryName" label="风险类别" width="138">
					</el-table-column>
					<el-table-column prop="riskTypeName" label="风险类型" width="138">
					</el-table-column>
					<el-table-column prop="riskLevelName" label="风险等级" width="78">
					</el-table-column>
					<el-table-column prop="informerSalesDeptName" label="举报人所属营业部" width="150">
					</el-table-column>
					<el-table-column prop="reflectName" label="举报人姓名" width="108">
					</el-table-column>
					<el-table-column prop="reflectPhone" label="举报人手机号" width="120">
					</el-table-column>
					<el-table-column prop="beReportedName" label="被举报人姓名" width="120">
					</el-table-column>
					<el-table-column prop="beReportedPhone" label="被举报人手机号" width="120">
					</el-table-column>
					<el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
					</el-table-column>
					<el-table-column prop="caseTypeName" label="案件类型" width="108">
					</el-table-column>
					<el-table-column prop="caseStatusName" label="案件状态" width="100">
					</el-table-column>
					<!-- <el-table-column prop="salesDeptName" label="所属分部" width="120">
					</el-table-column>
					<el-table-column prop="salesDeptPrincipal" label="分部负责人" width="100">
					</el-table-column> -->
					<el-table-column prop="lastStepUserName" label="上一步操作人" width="106">
					</el-table-column>
					<el-table-column prop="inspector" label="当前操作人" width="100">
					</el-table-column>
				</el-table>
				<el-pagination v-if="tableData.total" :current-page="tableData.filter.pageBean.pageIndex" :page-size="tableData.filter.pageBean.pageSize"
				 :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]" layout="total, sizes, prev, pager, next, jumper"
				 :total="tableData.total" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
			</div>
		</div>
	</div>
</template>
<script>	
	import cases from '@/mixins/case'

	export default {
		name: 'closedCase',
		mixins: [cases],
		data() {
			return {
				// 案件类型,
				tableData: {
					filter: {
						caseStatus: 7
					}
				}
			}
		},
		mounted() {
			this.$store.dispatch('setBreadData', [
				{
					name: '案件管理'
				},
				{
					name: '已结案件'
				}
			]);
			this.sumbitSave();
		}
	};
</script>